import React, { Component } from 'react'
import { Card,Form,Input,Button,message } from 'antd'
import Loading from "../../components/Loading"
import { getArt,editArt } from "../../api" 
// 富文本
import wangEdit from 'wangeditor'


const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};

export default class ArtEdit extends Component {
  constructor(){
	  super()
	  
	  this.state = {
		  edit:null,
		  article:{
			  title:"",
			  author:"",
			  desc:"",
			  content:""
		  }
	  }
  }
  render() {
	
    return (
      <Card title="文章编辑">
		{
			this.state.article.id?
			<Form
			     {...layout}
			     name="basic"
						  initialValues= { this.state.article }
			     onFinish={ this.submit }
			   >
			     <Form.Item
			       label="标题"
			       name="title"
			       rules={[
			         {
			           required: true,
			           message: '请输入标题',
			         },
			       ]}
			     >
			       <Input/>
			     </Form.Item>
					
			     <Form.Item
			       label="作者"
			       name="author"
			       rules={[
			         {
			           required: true,
			           message: '请输入作者',
			         },
			       ]}
			     >
			       <Input />
			     </Form.Item>
				<Form.Item
				  label="描述"
				  name="desc"
				  >
				  <Input.TextArea/>
				</Form.Item>		  
				<Form.Item
				  label="内容"
				  name="desc"
				  >
				  <div id="txt"></div>
				</Form.Item>	
					
			     <Form.Item wrapperCol={ { offset:4,span:20 } }>
			       <Button type="primary" htmlType="submit">
			         提交
			       </Button>
			     </Form.Item>
			   </Form>
			   :
			   <Loading/>
		}
      </Card>
    )
  }
  componentDidMount(){
	  this.getArt(this.props.match.params.id)
	 
  }
  
  // 请求 编辑这条文章数据
  getArt = async (id)=>{
	  let res = await getArt(id);
	  console.log(this)
	  console.log(res.data.data);
	  this.setState({
		  article:JSON.parse(JSON.stringify(res.data.data))
	  },()=>{
		  // 初始化富文本时机
		  this.setState({
		  		 edit: new wangEdit("#txt")
		  },()=>{
			  
		  		 this.state.edit.create();
				 this.state.edit.txt.html(this.state.article.content);
		  })
	  })
   }
  submit = (params)=>{
	// 处理id
	params.id = this.props.match.params.id;
	// 获取富文本编辑器的内容
	
	params.content = this.state.edit.txt.html();
	editArt(params).then(res=>{
		message.success(res.data.msg)
	})
  }
}
